<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>今天干了什么</title>
		<link rel="stylesheet" type="text/css" href="./css/animate.min.css"/>
		<style>	
			*{margin: 0; padding: 0;}
			html,body{background: #f4f5f6;width: 100%;height: 100%;margin: 0; padding: 0;}
			#app{width: 750px; margin: 0 auto;flex-direction: row; }
			#app .box{list-style: none;width: 50%;float: left;margin-top: 50px;}
			#app .box p{background: #ffffff;margin: 10px;padding: 10px;border-radius: 10px;height: 150px;display: flex;align-items:center;cursor: pointer;}
			#popup{width: 100%;height: 100%;background: rgba(0,0,0,.5);position: absolute;z-index: 999;}
			.popup-box{position: absolute;height: 450px;width: 400px;background: #FFFFFF;top: 50%;left: 50%;margin-top: -225px;margin-left: -200px;border-radius:16px;box-shadow: 0 0px 20px rgba(0,0,0,.3);}
			#close{width: 40px;height: 40px;background-image: url(images/close.png); position: absolute;bottom: -100px;left: 50%;margin-left: -20px;cursor: pointer;}
			.text{text-align: center;}
			.text h1{height: 80px;font-size: 26px;  line-height: 80px;}
			.text span{line-height: 40px;padding: 0 20px;}
		</style>
		
	</head>
	<body>
		<!-- 文字列表 -->
		<div id="app">
			<div class="box animated "><p>今天上午提交了求，修改UI具体包括转盘弹窗，抽奖按钮。抽奖信息跑马灯</p></div>
			<div class="box"><p>启动页文案修改，如下：中文:日本软银（新加坡）投资全球专业的数字货币交易平台</p></div>
			<div class="box"><p>在语音专区和休闲聊吧处增加跑马灯，用于展示中奖和签到信息</p></div>
			<div class="box"><p>邀请页面文案调整，具体见邀请好友中英文文案.pptx，海报图更换</p></div>
			<div class="box"><p>注册登录页修改为长方形，两侧宽度减小注册登录页修改为长方形，两侧宽度减小</p></div>
			<div class="box"><p>社交媒体封面重做，修改文案及做新的一套：纯色背景+logo，共两套</p></div>
		</div>
		
		<!-- 弹窗 -->
		<div id="popup" class="animated" style="display: none;">
			<div class="popup-box animated bounceInDown">
				<div class="text">
					<h1>今天干了什么</h1>
					<span></span>
				</div>
				<p id="close"></p>
			</div>
		</div>
		
		<script type="text/javascript">
			window.onload=function(){
				var boxs=document.getElementsByClassName('box');
				var oPopup=document.getElementById('popup');
				var popupBox=oPopup.getElementsByClassName('popup-box')[0];
				var close=document.getElementById('close');
				//console.log(popupBox);
				
				for(i=0;i<boxs.length;i++){
					(function(i){
						boxs[i].onclick=function(){
							oPopup.style.display='block';
							popupBox.classList.remove('fadeOutDown');
							popupBox.classList.add('bounceInDown');
							//console.log(this);
							var boxText=boxs[i].childNodes[0].innerText;
							console.log(boxText);
							var spanText=popupBox.getElementsByTagName('span')[0];
							spanText.innerHTML=boxText;
						}
					})(i);
				}
				
				close.onclick=function(){
					popupBox.classList.remove('bounceInDown');
					popupBox.classList.add('fadeOutDown');
					let interval = setTimeout(function(){
						oPopup.style.display='none';
						clearInterval(interval);
					},500)
				}
			}
		</script>
	</body>
</html>
